<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>公告</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<el-form-item label="公告">
					<el-input v-model="form.noticeText" placeholder="请输入公告内容" />
				</el-form-item>
				<el-form-item label="背景颜色">
					<el-color-picker v-model="form.bgColor" />
				</el-form-item>
				<el-form-item label="文字颜色">
					<el-color-picker v-model="form.color" />
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script lang="ts">
import { reactive, defineComponent, toRefs, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
interface DataState {
	form: {
		noticeText: string;
		color: string;
		bgColor: string;
	};
}
export default defineComponent({
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);

		// do not use same name with ref
		const state = reactive<DataState>({
			form: {
				noticeText: '',
				color: '#646566',
				bgColor: '#FFF8E9',
			},
		});
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					noticeText: '',
					color: '#646566',
					bgColor: '#FFF8E9',
				};
			} else {
				state.form = props.formData;
			}
			diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
		});

		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		return {
			...toRefs(state),
		};
	},
});
</script>

<style lang="scss">
@import './common.scss';
</style>
